<template>
  <div class="login">
    <!-- <h1>登录</h1> -->
    <header class="login_header">
      <h2>星辰日报</h2>
    </header>
    <main class="login_main">
      <div class="login_main_logo">
        <img src="../assets/logo.png" />
      </div>

      <div class="login_main_ipt">
        <div class="login_main_ipt_box">
          <input
            v-model="form.user_phone"
            type="text"
            placeholder="请输入手机号 / 邮箱"
          />
        </div>
        <div class="login_main_ipt_box">
          <input
            v-model="form.user_pwd"
            type="password"
            placeholder="请输入密码"
          />
        </div>
      </div>

      <div class="login_main_btn">
        <button @click="loginFn">登录</button>
      </div>
    </main>
    <footer class="login_footer">
      <div class="login_footer_pbox" @click="gotoRegisterFn">
        没有账号？请前往注册~
      </div>
      <div class="login_footer_pbox" @click="gotoChangepwdFn">忘记密码？</div>
    </footer>
  </div>
</template>

<style lang="less" scoped>
@import "../css/variable.less";
.login {
  .login_header {
    padding: 45px 0;

    h2 {
      text-align: center;
      font-family: "mylogofont";
    }
  }

  .login_main {
    .login_main_logo {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 240px;
      }
    }

    .login_main_ipt {
      .login_main_ipt_box {
        width: 270px;
        margin: 15px auto;

        input {
          background: #e0e8f6;
          border: 1px solid aqua;
          width: 270px;
          height: 45px;
          padding: 0 0 0 15px;
        }
      }
    }

    .login_main_btn {
      width: 270px;
      margin: 0 auto;

      button {
        width: 270px;
        height: 45px;
        background: aqua;
      }
    }
  }

  .login_footer {
    width: 270px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .login_footer_pbox {
      font-size: 12px;
      border-bottom: 1px dashed gray;
      padding: 5px 0;

      &:nth-child(2) {
        color: red;
      }
    }
  }
}
</style>

<script>
// 1、首先，导入混入对象
import RouterMixins from "@/components/mixins/RouterMixins";
export default {
  name: "LoginView",
  // 2、使用混入对象
  mixins: [RouterMixins],
  data() {
    return {
      form: {
        user_phone: "",
        user_pwd: "",
      },
    };
  },
  methods: {
    loginFn() {
      let userStr = localStorage.getItem("MYLOCALUSER");
      if (userStr) {
        // console.log(userStr);
        let users = JSON.parse(userStr);
        // 解构赋值data的数据
        let { user_phone, user_pwd } = this.form;
        if (user_phone && user_pwd) {
          // console.log("匹配中", users,user_phone,user_pwd);
          let arr = users.filter((item) => {
            if (item.user_phone == user_phone && item.user_pwd1 == user_pwd) {
              return item;
            }
          });
          // console.log("赞新的数据", arr);
          if (arr.length === 1) {
            alert("登录成功！");
            localStorage.setItem("USERID", arr[0].id);
            this.$router.push({path: "/"}).catch(()=>{});
          } else {
            alert("输入的密码有误，请重新输入或者更改密码后再尝试登录喔~~~");
          }
        } else {
          alert("输入框不能为空喔~~~");
        }
      } else {
        alert("该账号暂未存在，请前往注册再尝试登录喔~~~");
      }
    },
  },
};
</script>
